﻿(function($) {
    if(typeof(rio) == 'undefined'){
        rio = {};
    }
    if(typeof(rio.zIndex) == 'undefined'){
        rio.zIndex = 9000;
    }
	$.widget( "ui.rioDialog", {
		options : {
		    width:480,
		    height:360,
		    modal:true
        },
        _create : function() {
            var $self = this;
            var options = $self.options;
            var element = $self.element;
            var dlg = this.dlg = $('<div class="rio-dialog"></div>');
            var dlgOuter = $self.dlgOuter = $('<div class="rio-outer"></div>');
            var dlgInner = $self.dlgInner = $('<div class="rio-inner"></div>');
            
            var html = '';
            html += '<table class="rio-border">';
            html += '    <tbody>';
            html += '        <tr>';
            html += '            <td class="rio-nw"></td>';
            html += '            <td class="rio-n"></td>';
            html += '            <td class="rio-ne"></td>';
            html += '        </tr>';
            html += '        <tr>';
            html += '            <td class="rio-w"></td>';
            html += '            <td class="rio-c">';
            html += '            </td>';
            html += '            <td class="rio-e"></td>';
            html += '        </tr>';
            html += '        <tr>';
            html += '            <td class="rio-sw"></td>';
            html += '            <td class="rio-s"></td>';
            html += '            <td class="rio-se"></td>';
            html += '        </tr>';
            html += '    </tbody>';
            html += '</table>';
            var dlgBorder = this.dlgBorder = $(html);
            
            dlg.appendTo('body');
            dlgOuter.appendTo(dlg);
            dlgBorder.appendTo(dlgOuter);
            dlgInner.appendTo(dlgBorder.find('.rio-c'));
            element.appendTo(dlgInner);
            // 设置options
            $self._setOptions($self.options);
            
            if(options.modal){
                // 模式对话框
                if($self.mask == null){
                    $self.mask = $('<div class="rio-mask"></div>').appendTo('body');
                }
                $self.mask.css('zIndex', rio.zIndex++);
            }
            
            $self.dlg.css('zIndex', rio.zIndex++);
            
            $(window).bind('resize.riodialog', function(event){
                $self._position();
            });
            
            $self._position();
        },
        _position: function(){
            var $self = this;
            var options = $self.options;
            $self.dlg.css('left', ($(window).width() - $self.dlg.width()) / 2);
            $self.dlg.css('top', ($(window).height() - $self.dlg.height()) / 2);
            if(options.modal){
                // 模式对话框
                if($self.mask != null){
                    $self.mask.width($(window).width());
                    $self.mask.height(Math.max($(window).height(), $(document).height()));
                }
            }
        },
        _setOption : function(key, value) {
            var $self = this;
            switch (key) {
            case 'width':
                break;
            case 'height':
                break;
            default:
                break;
            }
            return this;
        },
        _destroy : function(){
            var $self = this;
            $self.dlg.hide();
            if($self.mask != null){
                $self.mask.hide();
            }
            $self.dlg.empty();
            $self.dlg.remove();
            if($self.mask != null){
                $self.mask.empty();
                $self.mask.remove();
            }
        }
	});

})(jQuery);
